<template>
	<view class="content">
		<view class="position-fixed left-0 w-100" :style="{top: topFixed, 'z-index': 100}">
			<u-tabs :list="tabs" name="bname" :is-scroll="false" activeColor="var(--mainColor)" :current="current" @change="change"></u-tabs>
		</view>
		<mescroll-body ref="mescrollRef" top="40px" :up="upOption" @init="mescrollInit" @down="downCallback" @up="upCallback" @emptyclick="emptyclick">
			<view class="u-p-20">
				<block v-for="(item, index) in orderList" :key="index">
					<template v-if="current == 0">
						<view class="flex align-center justify-between u-p-20 u-m-b-20 bg-white rounded-15" @click="toDetail(item.goods_merch_id)">
							<view class="">
								<u-image :src="item.images" width="140rpx" height="140rpx" borderRadius="10"></u-image>
							</view>
							<view class="flex-1 flex flex-column justify-between u-p-l-20" style="height: 140rpx">
								<text class="text-ellipsis-2">{{item.name}}</text>
								<view class="flex align-center justify-between">
									<text class="font-30">¥{{item.number}}</text>
									<view class="" @click.stop="dele(item.goods_merch_id)">
										<u-icon name="trash" size="40" color="#c7c7c7"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</template>
					<template v-if="current == 1">
						<view class="">
							<view class="flex justify-between u-p-20 u-m-b-20 rounded-20 bg-white" @click="toSupplier(item.goods_merch_id)">
							  <u-image :src="item.images" width="120rpx" height="120rpx"></u-image>
							  <view class="flex-1 flex justify-between u-m-l-20">
							    <view class="left">
										<view class="text-ellipsis" style="width: 250rpx;">
											<text class="u-font-28" >{{item.name}}</text>
										</view>
							      <view class="flex align-center u-m-t-20" style="height: 30rpx;line-height: 30rpx;">
											<text class="u-font-24 text-greey">{{item.number}}人关注</text>
							      </view>
							    </view>
							    <view class="right flex align-center">
							      <view class="pr-2" @click.stop="dele(item.goods_merch_id)">
											<u-tag mode="plain" text="已收藏" shape="circle" color="#999999" />
							      </view>
							    </view>
							  </view>
							</view>
						</view>
					</template>
				</block>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { GoodsCenterApi } from '@/api/serves.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				upOption: {
					empty: {
						btnText: '去逛逛'
					}
				},
				tabs: [
					{
						name: '商品收藏',
						orderList: []
					}, 
					{
						name: '店铺收藏',
						orderList: []
					}, 
				],
				current: 0,
			}
		},
		computed: {
			topFixed() {
				return  this.windowTop + 'px'
			},
			orderList() {
				return this.tabs[this.current].orderList
			},
		},
		onLoad(options) {
			this.current = options.current || 0
		},
		methods: {
			// 上拉加载
			upCallback(page) {
				GoodsCenterApi.collectList({type: this.current ==1?2:1, page: page.num}).then(res=> {
					console.log('收藏列表', res);
					if(res.code == 1){
						let result = res.data
						let curTab = this.tabs[this.current]
						if(page.num == 1) curTab.orderList = []; //如果是第一页需手动制空列表
						curTab.orderList = curTab.orderList.concat(result); //追加新数据
						this.mescroll.endByPage(result.length, res.totalpage)
					}else {
						this.$Toast(res.msg)
						this.mescroll.endErr()
					}
				})
			},
			change(index) {
				this.current = index
				this.mescroll.resetUpScroll() 
			},
			dele(id) {
				uni.showModal({
					title: '提示',
					content: '确定要取消收藏吗？',
					success: (res)=> {
						if (res.confirm) {
							GoodsCenterApi.notcollectGoods({type: this.current ==1?2:1, id}).then(res=> {
								console.log('取消收藏', res);
								this.$u.toast(res.msg);
								if(res.code == 1){
									this.mescroll.resetUpScroll() 
								}
							})
						}
					}
				});
			},
			emptyclick() {
				console.log(this.current);
				let url = this.current == 1? '/pages/tabbar/supplier/supplier' : '/pages/tabbar/index/index'
				uni.switchTab({url: '/pages/tabbar/index/index'})
			},
			toDetail(goods_id) {
				uni.navigateTo({
				  url:'/pages/goodsDetail/commonGoodsDetail/commonGoodsDetail?goods_id='+ goods_id
				})
			},
			toSupplier(id) {
				uni.navigateTo({
					url:'/pages/supplierPage/supplierIndex/supplierIndex?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
